<template>
	<view class="page">
		<!-- 搜索 -->

		<view class="index-nav">
			<u-navbar
			:bgColor="bgColor"
			:border-bottom="false" 
			 placeholder-color=""
			 :placeholder="true"
			:is-back="false">
				<view class="" slot="left"></view>
				<view class="slot-wrap" slot="center" style="width: 100%;">
					<view style="overflow: hidden;">
						<view class="flex-box" slot="left" style="width:150rpx;float: left;height:64rpx;">
							<u-icon size="20" name="map" style="margin-right: 10rpx;"></u-icon>
							 <view style="font-size:26rpx;">{{province}}</view>
						</view>
						<view style="float: left;width:350rpx;">
							<u-search placeholder="请输入关键字" @search="searchStation" :showAction="false" v-model="keyword"></u-search>
						</view>
					</view>
				
				</view>
			</u-navbar>
		</view>
		<!-- 筛选 -->
		
		<u-sticky customNavHeight="44" offsetTop="44">
			<view class="screen-info">
				<view class="screen-list">
					<view class="list box-1 list1" @click="onSynthesize(0)" :class="{'action':screenShow===0}">
						<text>综合排序</text>
						<!-- <text class="iconfont icon-sanjiao icon_z"></text> -->
					</view>
					<view class="list list2" @click="onSynthesize(1)" :class="{'action':screenShow===1}">
						<text>距离最近</text>
						<text></text>
					</view>
					<view class="list list3" :class="{'action':screenShow===2}" @click="onSynthesize(2)">
						<text>好评优先</text>
						
					</view>
				
				</view>
				
			</view>
		</u-sticky>
	
		
		<!-- 商品列表 -->
		<view class="goods-data">
			<mescroll-body ref="mescrollRef"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
				:down="downOption"
				:up="upOption"
				:top="0">
				<view class="goods-list" v-if="goodsList.length">
					
					<view class="flex-box" :class="isList?'list-view':'list-li'" @click="toDetails(item)" v-for="(item,index) in goodsList"  :key="index">
						<view class="thumb">
							<image :src="item.thumb" ></image>
						</view>
						<view class="item box-1">
							<view class="title flex-box">
								<text class="one-omit" style="margin-left:0;">{{item.title}}</text>
								<text style="width:130rpx;text-align: right;">距您{{parseInt(item.distance*100)/100}}km</text>
							</view>
							
							<view class="xing">
								<u-rate :gutter="1" :value="item.score" readonly></u-rate>
							</view>
							<view class="price flex-box">
								<u-icon size="20" name="map" style="margin-right: 5rpx;"></u-icon>
								<view class="box-1 two-omit" style="margin:0 10rpx;font-size:26rpx;">
									{{item.address}}
								</view>
								<view class="btn" @click="toMap(item)">到这里去</view>
								
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<u-empty mode="data" marginTop="100" text="  "></u-empty>
				</view>
			</mescroll-body>
		</view>
		<!-- 抽屉 -->
		<view class="cu-modal drawer-modal justify-end" :class="{'show':isDrawer}" @click="isDrawer = false" style="position: absolute;">
			<view class="cu-dialog basis-lg" @click.stop="isDrawer = true">
				<view class="serve">
					<view class="title">
						<text>服务</text>
					</view>
					<view class="serve-list">
						<view class="list action">
							<text>会员专享</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
						<view class="list">
							<text>活动</text>
						</view>
					</view>
				</view>
				<view class="price-screen">
					<view class="title">
						<text>价格区间</text>
					</view>
					<view class="price-section">
						<input type="number" placeholder="最低价">
						<text></text>
						<input type="number" placeholder="最高价">
					</view>
				</view>
				<view class="operation-btn">
					<view class="btn" @click.stop="isDrawer = false">
						<text>取消</text>
					</view>
					<view class="btn action">
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar -->
		<TabBar :tabBarShow="3"></TabBar>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import qqmapsdk from '@/utils/qqmap-wx-jssdk.min.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				keyword:'',
				bgColor: '#d0abf4',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
				},
				// 列表视图切换
				isList: true,
				// 筛选弹窗
				isScreen: false,
				// 筛选切换
				screenShow: 0,
				// 抽屉
				isDrawer: false,
				// keyword: '',
				goodsList:[
				 
				],
				latitude:'',
				longitude:'',
				pageSize:10,
				province:'',
				page:1,
				sort:'none'
			}
		},
		onLoad(params) {
			this.keyword = decodeURIComponent(params.keyword||'');
			
			this.latitude = uni.getStorageSync('mylatitude');
			this.longitude =  uni.getStorageSync('longitude');
		},
		methods: {
			toDetails(item){
				uni.navigateTo({
					url: "/pages/Station/details?id="+item.id
				})
			},
			searchStation(value){
				this.keyword = value
				this.upCallback()
			},
			toMap(item){
				uni.openLocation({
					latitude: parseFloat(item.lat),
					longitude: parseFloat(item.lng)
				 })
				 return false
			},
			
			// 定位
			getgLocation(callback) {
				// if(!this.hasLogin) return
				const QQMapWX = new qqmapsdk({
					key: 'DJFBZ-7W6KD-EII4D-PIKJI-WPF5Z-MEBAO'
				});
				let _this = this
				uni.getLocation({
				  type: 'wgs84', // 返回国测局经纬度坐标系统的结果
				  success(res) {
				    console.log('成功获取到位置信息：', res);
				    const latitude = res.latitude; // 纬度
				    const longitude = res.longitude; // 经度
					_this.latitude = latitude
					_this.longitude = longitude
				    uni.setStorageSync('mylatitude', latitude);
					uni.setStorageSync('mylongitude', longitude);
					// 解析地址
					QQMapWX.reverseGeocoder({
						location: {
							latitude: _this.latitude,
							longitude: _this.longitude
						},
						success: function(res) {
							console.log("解析地址成功");
							console.log(res);
							// 省
							let province = res.result.ad_info.province;
							// 市
							let city = res.result.ad_info.city;
							_this.province = city
							console.log(province);
							console.log(city);
						},
						fail: function(res) {
							uni.showToast({
								title: '定位失败',
								duration: 2000,
								icon: "none"
							})
							console.log(res);
						},
						complete: function(res) {
							console.log(res);
						}
					})
				    // TODO: 根据需要进行后续操作
					callback()
				  },
				  fail(err) {
				    console.error('获取位置失败：', err);
				    // TODO: 处理获取位置失败情况
				  }
				});
			

			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback(){
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let _this = this
				//联网加载数据
				this.getgLocation(function(){
					_this.$u.api.souceStore({
							page:_this.page,
							lat:_this.latitude,
							lng:_this.longitude,
							sort:_this.sort,
							so:_this.keyword
						}).then(res=>{
							  console.log(res,'商品列表')
					    	//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					    	//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
					    
					    	//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					    	_this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
					    
					    	//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					    	//this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
					    
					    	//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					    	// this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)
					      
					    	//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
					    	// this.mescroll.endSuccess(res.list.length);
							if(_this.page == 1){_this.goodsList = [];} //如果是第一页需手动制空列表
							_this.goodsList =  _this.goodsList.concat(res.msg.list); //如果是第一页需手动制空列表
							return false
					    // 	//设置列表数据
					//     	if(this.page == 1||this.page<res.msg.totalPage){
							// 	this.goodsList =  res.msg.list; //如果是第一页需手动制空列表
							// }else{
							// 	this.goodsList = this.goodsList.concat(res.msg.list); // 注意不是this.msgList.concat
							// }
					    }).catch(()=>{
					    	//联网失败, 结束加载
					    	_this.mescroll.endErr();
					    })
				})
				 
			},
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 综合点击
			 * @param {Number} type
			 */
			onSynthesize(type){
				this.screenShow = type;
				this.isScreen = !this.isScreen;
				if(type==0){
					this.sort = 'none'
				}else if(type==1){
					this.sort = 'distance'
				}else{
					this.sort = 'score'
				}
				
				this.upCallback()
			},
			/**
			 * 商品列表点击
			 */
			onGoodsList(item,index){
				uni.navigateTo({
					url: '/pages/GoodsDetails/GoodsDetails',
					animationType: 'zoom-fade-out',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import  'Station.scss';
</style>
